<template>
  <el-dialog v-if="load" :close-on-click-modal="false" title="销量趋势" v-model="visible" align-center width="800px" @close="handleClose">
    <div ref="chartRef" style="width: 740px;height: 400px;"></div>
  </el-dialog>
</template>

<script setup>
import api from '../api'
import * as echarts from 'echarts'
const load = ref(false)
const visible = ref(false)
let loadings = reactive({})

const emit = defineEmits(['close', 'success'])

// 打开弹窗
const chart = ref()
const chartRef = ref()
const open = async (se_id) => {
  if (!load.value) {
    load.value = true
    await 1
  }
  loadings = reactive({})
  visible.value = true
  const data = await api.sale({ se_id }).then(res => Object.entries(res.data))
  if (!chart.value) chart.value = echarts.init(chartRef?.value)
  chart.value.setOption({
    grid: {
      // 四周留白区域设置
      top: 40,
      right: 20,
      left: 20,
      bottom: 20,
      containLabel: true
    },
    tooltip: {
      trigger: 'item', // 触发类型；轴触发，axis则鼠标hover到一条柱状图显示全部数据，item则鼠标hover到折线点显示相应数据，
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效，
        type: 'cross', // 默认为line，line直线，cross十字准星，shadow阴影
        crossStyle: {
          color: '#fff'
        }
      },
      textStyle: {
        align: 'left'
      }
    },
    xAxis: {
      type: 'category',
      data: data.map(d => d[0]) || []
    },
    yAxis: {
      type: 'value',
      axisLabel: {
        formatter: '{value}'
      }
    },
    legend: {
      x: 'center',
      y: 'bottom',
      itemWidth: 20,
      itemHeight: 12,
      textStyle: {
        fontSize: 12, // 字体大小
        color: '#333'// 字体颜色
      }
    },
    series: [
      {
        type: 'line',
        smooth: true,
        data: data.map(d => d[1]),
        itemStyle: {
          normal: {
            color: '#1A73E8'
          }
        },
        areaStyle: {
          color: '#c5d7ef'
        }
      }
    ]
  })

}
// 关闭弹窗
const close = () => {
  visible.value = false
}

const handleClose = () => {
  emit('close')
}

defineExpose({ open })
</script>